<template>
<!--  <h2>年检通知创建</h2>-->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch">
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="年度" prop="year">
        <el-date-picker v-model="queryParams.year" type="year" placeholder="选择年"  format="yyyy" value-format="yyyy" style="width: 240px"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" ref="refbut">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus"  @click="handeleAdd">添加</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table ref="table" border v-loading="loading" :data="dataList" :height="tableHeight" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" :index="table_index" width="55" align="center" prop="id" :show-overflow-tooltip="true"/>
      <el-table-column label="标题" prop="title" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="年度" prop="year" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="创建人" prop="createUser" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" prop="createTime" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="是否启用" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isStart" align="center" active-value="1" inactive-value="0"
                     @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="年报通知是否下发" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row. isIssueNotice == '0' ? '未下发' : '已下发' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="500">
        <template slot-scope="scope">
          <el-button type="success" plain @click="handleUpdate(scope.row)" v-show="scope.row.isStart == '0' && scope.row. isIssueNotice == '0'">修改</el-button>
          <el-button type="danger" plain @click="handleDelete(scope.row)" v-show="scope.row.isStart == '0' && scope.row. isIssueNotice == '0'">删除</el-button>
          <el-button type="warning" plain @click="handleDistribute(scope.row)" v-show="scope.row. isIssueNotice=='0' && scope.row.isStart == '1'">下发年检通知</el-button>
          <el-button type="warning" plain @click="sbnbxq(scope.row)" v-show="scope.row. isIssueNotice=='1'">上报年报详情</el-button>
          <el-button type="warning" plain @click="onPreviewTap(scope.row)" v-show="scope.row. isIssueNotice=='1'">年报汇总结果</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加/修改 -->
    <Notice  :title="title" :open="open" @closeDelDialog="closeDelDialog" :type="this.queryParams.type" :dataInfo="dataInfo" :showDelete="true"></Notice>

    <sbnbxq v-if="sbnbxqOpen" :open="sbnbxqOpen" @closeDelDialog="closeDelDialog" :datmInfo="datmInfo"></sbnbxq>

    <el-dialog title="下发年检通知" :visible.sync="noticeOpen" width="45%" append-to-body :before-close="closeDelDialog">
      <div style="width: 90%; height: 650px; margin: 0 auto; margin-top: 3%;">
        <div style="margin-bottom: 15px">
          <el-radio-group v-model="radio">
            <el-radio :label="'0'">全部</el-radio>
            <el-radio :label="'1'">指定单位</el-radio>
            <el-radio :label="'2'">随机单位</el-radio>
          </el-radio-group>
        </div>
        <div v-if="radio=='0'">
          <span slot="label">
            <em style="color:red"> * </em>
            上报截止时间:
          </span>
          <el-date-picker v-model="time" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" />
        </div>
        <div v-if="radio=='1'">
          <span slot="label">
            <em style="color:red"> * </em>
            上报截止时间:
          </span>
          <el-date-picker v-model="time1" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" />
          <el-card style="margin-top: 10px">
            <el-transfer v-model="deptChecked" filterable :data="deptData" :titles="['选项合集', '已选项合集']"></el-transfer>
          </el-card>
        </div>
        <div v-if="radio=='2'">
          <div>
            <span slot="label">
              <em style="color:red"> * </em>
              上报截止时间:
            </span>
            <el-date-picker v-model="time2" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" />
            <span slot="label">
              <em style="color:red"> * </em>
              随机单位数:
            </span>
            <el-input-number v-model="num" :min="1" ></el-input-number>
            <el-button type="primary" plain style="margin-left: 5px" @click="extract">抽取</el-button>
            <el-button type="primary" plain style="margin-left: 5px; margin-top: 10px" @click="append">追加</el-button>
          </div>
          <el-card style="margin-top: 10px; height: 500px; overflow: auto">
            <div v-for="(item, index) in deptExtract" :key="index" style="display: flex; margin-bottom: 10px">
              <span style="padding: 0 10px; font-size:16px; line-height: 36px; width: 90%;">{{ item.label }}</span>
              <el-button type="danger" plain icon="el-icon-close" circle @click="deleteDept(item)"></el-button>
            </div>
          </el-card>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button  @click="closeDelDialog">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 追加单位弹窗 -->
    <el-dialog title="追加" :visible.sync="appendOpen" width="40%" append-to-body >
      <div style="margin: 0 auto; width: 90%">
        <el-transfer v-model="appendDept" filterable :data="deptData" :titles="['选项合集', '已选项合集']"></el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAppend">确 定</el-button>
        <el-button  @click="closeAppend">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="viewTitle" :visible.sync="viewOpen" width="45%" append-to-body>
      <div>
        <el-button type="primary" @click="dc">导出</el-button>
        <!--
         文件预览
         1、修改添加文件预览istype="1"
         2、查看组件详情istype="2"
         -->
        <FilePreview v-if="item" :item="item" :istype="istype" :moudle="1"></FilePreview>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import estimateTableHeight from "@/mixins/estimateTableHeight";
import Notice from "@/views/archive/supervision/annualInspectionNotice/notice";
import sbnbxq from "@/views/archive/supervision/annualInspectionNoticeNb/sbnbxq";
import FilePreview from "@/views/archive/supervision/supervises/filePreview";
import { checkIsAdd } from "@/api/archive/supervision/annualInspectionNotice.js"
import {
  deleteNotice,
  findById,
  getDept,
  getNoticeList, send,
  updateNotice
} from "@/api/archive/supervision/annualInspectionNotice";

export default {
  name: "index",
  mixins: [estimateTableHeight], // 混入方法
  components: { Notice,sbnbxq,FilePreview },
  data() {
    return {
      istype: '1',
      item: '',
      viewOpen: false,
      viewTitle: '',
      currrentId : '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        year: undefined,
        type:"nb"
      },
      type:"nb",
      datmInfo: "",//获取档案题名当前点击信息
      sbnbxqOpen: false,//添加档案门类弹窗
      loading: true,
      dataList: [],
      total: 0,
      showSearch: true,
      title: '',
      open: false,
      dataInfo: {},

      noticeOpen: false,
      radio: '0',
      // 上报截止时间
      time: undefined,
      time1: undefined,
      time2: undefined,
      num: undefined, // 随机抽取数
      deptData: [], // 左侧全部单位
      deptExtract: [], // 随机抽取单位
      deptChecked: [], // 选中单位

      appendOpen: false,
      appendDept: [], //追加的单位
    }
  },
  created() {
    this.getList()
  },
  methods: {
    dc(){
      this.download('/archive/annu/download?totalNoticeId='+this.currrentId, {
      }, `yearReport_${new Date().getTime()}.xlsx`)
    },
    onPreviewTap(item) {
      checkIsAdd(item.id).then(res => {
        if (res.code == "200") {
          this.currrentId = item.id;
          this.viewTitle = "查看";
          this.viewOpen = true
          this.item = item
          this.item.isdownloadFile3 = "1"
          this.item.docType = 'XLSX'
        }

      })

    },
    sbnbxq(data) {
      this.datmInfo = data;
      this.sbnbxqOpen = true
    },
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    getList() {
      this.loading = true
      getNoticeList(this.queryParams).then(res=>{
        this.dataList = res.rows
        this.loading = false
        this.total = res.total
      })
    },
    handeleAdd() {
      this.title = '添加年报通知'
      this.open = true
    },
    closeDelDialog() {
      this.radio = '0'
      this.time = undefined
      this.time1 = undefined
      this.time2 = undefined
      this.num = undefined
      this.deptData = []
      this.deptExtract = []
      this.deptChecked = []
      this.open = false
      this.noticeOpen = false
      this.sbnbxqOpen = false
      this.getList()
    },
    // 修改启用状态
    handleStatusChange(row) {
      this.form = {
        id: row.id,
        isStart:row.isStart
      }
      updateNotice(this.form).then(response=>{
        this.$modal.msgSuccess("修改成功！");
        this.getList();
      }).catch(() => {
        this.getList();
      })
    },
    handleUpdate(row) {
      findById({id: row.id}).then(response=>{
        this.dataInfo = response.data
        this.title = '修改年报通知'
        this.open = true
      })
    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除名为"' + row.title + '"的附件？').then(function() {
        return deleteNotice({ id: row.id});
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {});
    },
    // 下发年检通知
    handleDistribute(row) {
      this.noticeOpen = true
      this.noticeId = row.id
      getDept({
        type: '1'
      }).then(res=>{
        this.deptData = res.data.map(item=>{
          return {
            key: item.id,
            label: item.registeredUnit,
            tenantCode: item.tenantCode,
          }
        })
      })
    },
    submit() {
      var form = {}
      // 全部
      if (this.radio == '0') {
        if (this.time == undefined) {
          this.$modal.msgWarning('请选择截止日期')
          return false
        } else {
          const data = this.deptData.map(item=>{
            return {
              id: item.key,
              registeredUnit: item.label,
              tenantCode: item.tenantCode
            }
          })
          var form = {
            id: this.noticeId,
            deadLine: this.time,
            manageTenant: data
          }
          this.distribute(form)
        }
      } else if (this.radio == '1') { // 指定单位
        if (this.time1 == undefined) {
          this.$modal.msgWarning('请选择截止日期')
          return false
        } else {
          let matchedItems = this.deptData.filter(item => this.deptChecked.includes(item.key));
          const data = matchedItems.map(item=>{
            return {
              id: item.key,
              registeredUnit: item.label,
              tenantCode: item.tenantCode
            }
          })
          var form = {
            id: this.noticeId,
            deadLine: this.time1,
            manageTenant: data
          }
          this.distribute(form)
        }
      } else { // 随机单位
        if (this.time2 == undefined) {
          this.$modal.msgWarning('请选择截止日期')
          return false
        } else if (this.num == undefined) {
          this.$modal.msgWarning('请选择随机单位数进行抽取')
          return false
        } else if (this.deptExtract.length == 0) {
          this.$modal.msgWarning('请进行单位抽取')
          return false
        } else {
          const data = this.deptExtract.map(item=>{
            return {
              id: item.key,
              registeredUnit: item.label,
              tenantCode: item.tenantCode
            }
          })
          var form = {
            id: this.noticeId,
            deadLine: this.time2,
            manageTenant: data
          }
          this.distribute(form)
        }
      }
    },
    distribute(form) {
      send(form).then(res=>{
        this.$modal.msgSuccess('下发成功')
        this.closeDelDialog()
      })
    },
    // 抽取
    extract() {
      if (this.num == undefined) {
        this.$modal.msgWarning('请输入随机抽取数目')
      } else {
        getDept({
          type: '2',
          number: this.num
        }).then(res=>{
          this.deptExtract = res.data.map(item=>{
            return {
              key: item.id,
              label: item.registeredUnit,
              tenantCode: item.tenantCode
            }
          })
        })
      }
    },
    deleteDept(item) {
      this.deptExtract = this.deptExtract.filter(dept => dept.key != item.key)
    },
    // 追加
    append() {
      this.appendOpen = true
      this.appendDept = this.deptExtract.map(item => {
        return item.key
      })
    },
    submitAppend() {
      let matchedItems = this.deptData.filter(item => this.appendDept.includes(item.key));
      this.deptExtract = matchedItems
      this.appendOpen = false
    },
    closeAppend() {
      this.appendOpen = false
    },
  }
}
</script>

<style lang="scss">
.el-transfer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-transfer-panel__item {
    margin-right: 0;
  }

  .default-tranfer-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .button-group {
      em {
        margin-right: 8px;
      }
    }
  }

  .el-input.el-input--small {
    .el-input__inner {
      border-radius: 4px;
    }
  }

  .el-transfer__buttons {
    padding: 0;
    margin: 0 17px;

    .el-transfer__button {
      display: block;
      margin: 0 0 5px 0;
      padding: 4px 8px;
    }

    .el-button--primary.el-transfer__button {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2A76CD;
      border-color: #2A76CD;
    }

    .el-button--primary.is-disabled {
      background-color: #a0cfff;
      border-color: #a0cfff;
    }
  }

  .el-checkbox__input.is-indeterminate {
    .el-checkbox__inner {
      background: #2A76CD;
      border-color: #2A76CD;
    }
  }

  .el-transfer-panel {
    width: 49%;
    border-radius: 0;
  }
  .el-transfer-panel__list.is-filterable{
    height: 390px;
  }
  .el-transfer-panel__body {
    .el-checkbox__label {
      &:hover {
        color: #2A76CD;
      }
    }
    height: 437px;
  }

  .el-transfer-panel__header {
    .el-checkbox {
      .el-checkbox__label {
        font-size: 14px;

        span {
          left: 100px
        }
      }
    }
  }

  .el-transfer-panel__footer {
    top: 0;
    left: 61%;
    background-color: transparent;
    display: flex;
    width: 30%;
    justify-content: right;
    border-color: transparent;

    .el-button--text {
      color: #B5B5B5;
      margin-left: 5px;

      .icon-huidaodingbu {
        font-size: 16px;
      }

      em {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }

  .el-transfer-panel:first-child {
    .el-transfer-panel__header {
      .el-checkbox {
        .el-checkbox__label {
          span {
            left: 84px;
          }
        }
      }
    }
  }
}
</style>

